<template>
    <div class="app-container">
        <el-row class="pagecenter">
            <el-form :inline="true" :model="listQuery">
                <el-form-item label="产品类型">
                    <el-select v-model="listQuery.type" placeholder="产品类型" class="selectStyle">
                        <el-option v-for="item in productType" :key="item.code" :label="item.typeName" :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="审核状态">
                                                  <el-select v-model="listQuery.status" placeholder="审核状态" class="selectStyle">
                                                    <el-option label="全部" value=""></el-option>
                                                    <el-option label="未审核" value="1"></el-option>
                                                    <el-option label="未通过" value="2"></el-option>
                                                    <el-option label="已通过" value="3"></el-option>
                                                  </el-select>
                                                </el-form-item> -->
                <el-form-item label="发布时间">
                    <el-date-picker v-model="dateScope" type="daterange" placeholder="选择时间范围" format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="关键词查询">
                    <el-input placeholder="档案名称或档案编号" v-model="listQuery.productionNameOrTraceId" :maxlength="50" @keyup.enter.native="handleCurrentChange(1)"></el-input>
                </el-form-item>
                <el-form-item label-width="80px">
                    <el-button @click="fetchData" icon="search">查询</el-button>
                    <el-button @click="resetFetch">
                        <icon-svg icon-class="zhongzhi1"></icon-svg>&nbsp;&nbsp;重置条件</el-button>
                    <el-button @click="handleExcel" v-show="btnVisible.isExport">
                        <icon-svg icon-class="Excel4"></icon-svg>&nbsp;&nbsp;导出excel</el-button>
                    <el-button @click="handleReturn">
                        <icon-svg icon-class="undo"></icon-svg>&nbsp;&nbsp;返回列表</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row class="pageborder">
            <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" highlight-current-row tooltip-effect="dark" style="width: 100%" :fit="true">
                <el-table-column label='序号' min-width="80" header-align="center" align="center">
                    <template scope="scope">
                        {{ page.pageSize * (page.currentPage - 1) + scope.$index + 1}}
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="档案编号" min-width="100" header-align="center" align="left">
                    <template scope="scope">
                        <span>{{scope.row.id}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="productionname" label="档案名称" min-width="280" :show-overflow-tooltip="true" header-align="center" align="left">
                    <template scope="scope">
                        <span>{{scope.row.productionname}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="productionaddress" label="生产地址" min-width="280" :show-overflow-tooltip="true" header-align="center" align="left">
                    <template scope="scope">
                        {{scope.row.productionaddress}}
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="产品类型" min-width="105" header-align="center" align="left">
                    <template scope="scope">
                        <span>{{scope.row.type}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="securitycodequantity" label="验证码使用次数" min-width="150" header-align="center" align="right">
                    <template scope="scope">
                        <span>{{scope.row.securitycodequantity}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createdate" label="发布时间" min-width="170" :show-overflow-tooltip="true" header-align="center" align="left">
                    <template scope="scope">
                        <span>{{scope.row.createdate}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="auditstatus" label="审核状态" min-width="110" header-align="center" align="center">
                    <template scope="scope">
                        <span>{{scope.row.auditstatus}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="180" header-align="center" align="center">
                    <template scope="scope">
                        <el-button type="small" @click="viewArchive(scope.$index,scope.row)" v-show="btnVisible.isView">
                            <icon-svg icon-class="view"></icon-svg>&nbsp;&nbsp;查看</el-button>
                        <el-button type="small" @click="handleRecycleArchive(scope.$index,scope.row)" v-show="btnVisible.isRecover">
                            <icon-svg icon-class="zhongzhi2"></icon-svg>&nbsp;&nbsp;恢复</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row class="pagination" v-if="page.total > 0 ? true : false">
            <el-pagination @current-change="handleCurrentChange" :page-size="page.pageSize" layout="total, prev, pager, next, jumper" :total="page.total">
            </el-pagination>
        </el-row>
    </div>
</template>

<style scoped>
.pagetop {
    margin-bottom: 20px;
}

.pagination {
    text-align: center;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.colSpace {
    margin-left: 5px;
}

.cardbody {
    margin-top: 0px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.cardup {
    padding: 1px 10px;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.cardcontent {
    color: white;
}

.yesterday {
    font-size: 14px;
}

.carddown {
    padding: 10px 10px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.viewBtn {
    float: right;
}

.selectStyle {
    width: 145px;
}

.el-form-item {
    margin-bottom: 15px;
}
</style>

<script>
import { getList, exportArchiveToExcel, archiveRecycle } from 'api/archive';
import { getProductTypeList, getPositionList } from 'api/system';
import { parseTime } from 'utils/index';
import { btnIsVisible, getUrlParams, trimStr } from 'utils/customer';
import Cookies from 'js-cookie';

export default {
    data() {
        return {
            list: null,
            listQuery: {
                // status: null,
                type: '',
                createdatestart: '',
                createdateend: '',
                productionNameOrTraceId: '',
                deleted: 1
            },
            page: {
                pageSize: null,
                total: null,
                totalPage: null,
                currentPage: null
            },
            listLoading: true,
            dateScope: null,
            productType: [],
            btnVisible: {
                isView: false,
                isExport: false,
                isRecycle: false,
            },
            excelUrl: '',
            excelParams: ''
        }
    },
    watch: {
        'listQuery.type': function(val) {
            this.handleCurrentChange(1)
        },
        'listQuery.status': function(val) {
            this.handleCurrentChange(1)
        },
        // 'listQuery.productionNameOrTraceId': function(val, oldval) {
        //     if (oldval && !val) {
        //         this.fetchData()
        //     }
        // },
        dateScope: function(val, oldval) {
            if (val || (oldval && !val)) {
                this.listQuery.createdatestart = null;
                this.listQuery.createdateend = null;
                this.handleCurrentChange(1)
            }
        },
    },
    created() {
        this.getProductType();
        this.fetchData();
        this.getBtnVisbleStatus();
    },
    methods: {
        getBtnVisbleStatus() {
            this.btnVisible.isView = btnIsVisible('ARCHIVES_LIST_VIEW') || false;
            this.btnVisible.isExport = btnIsVisible('ARCHIVES_LIST_EXPORT') || false;
            this.btnVisible.isRecover = btnIsVisible('ARCHIVES_LIST_RECYCLE_RECOVER') || false;
        },
        getProductType() {
            getProductTypeList().then(response => {
                let res = response.data;
                if (res.flag === 1) {
                    this.productType = res.data;
                }
            })
        },
        resetFetch() {
            this.listQuery.type = '';
            this.dateScope = null;
            //   this.listQuery.status = null;
            this.listQuery.createdatestart = null;
            this.listQuery.createdateend = null;
            this.listQuery.productionNameOrTraceId = '';
            this.handleCurrentChange(1)
        },
        fetchData() {
            this.listLoading = true;
            this.page.pageSize = this.page.pageSize || 10;
            this.page.currentPage = this.page.currentPage || 1;
            this.listQuery.currentPage = this.page.currentPage;
            this.listQuery.pageSize = this.page.pageSize;
            this.listQuery.type = this.listQuery.type || '';
            this.excelParams = getUrlParams(this.listQuery)
            if (this.dateScope) {
                if (this.dateScope[0] && this.dateScope[1]) {
                    this.listQuery.createdatestart = parseTime(this.dateScope[0]);
                    this.listQuery.createdateend = parseTime(this.dateScope[1]);
                }
            }
            //   this.listQuery.status = this.listQuery.status || '';
            this.listQuery.productionNameOrTraceId = trimStr(this.listQuery.productionNameOrTraceId) || '';
            getList(this.listQuery).then(response => {
                let res = response.data;
                if (res.flag) {
                    this.list = res.data;
                    this.page = res.page;
                }
                this.listLoading = false;
            })
        },
        // 数据列表导出到excel
        handleExcel() {
            if (this.list.length <= 0) return;
            this.excelUrl = '/trc-service-product/production/exportTraceArchivesForReportStatistics' + this.excelParams;
            window.location.href = this.excelUrl;
        },
        // 查看档案回收站
        handleRecycle() {
            this.$router.push({ path: 'archiverecycle' })
        },
        // 返回档案列表
        handleReturn() {
            this.$router.go(-1)
        },
        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]))
        },
        handleDivisionChange(val) {
            console.log(val);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.page.currentPage = val;
            this.fetchData();
        },
        viewArchive(index, row) {
            this.$router.push({ path: 'archiveview', query: { archiveid: row.id, auditstatus: row.auditstatus, deleted: 1 } })
        },
        handleRecycleArchive(index, row) {
            // console.log('恢复产品档案.');
            let requestParams = {
                id: row.id
            }
            archiveRecycle(requestParams).then(reponse => {
                let res = reponse.data;
                if (res.flag === 1) {
                    // 提示信息
                    this.$message({
                        showClose: true,
                        message: '产品档案恢复成功',
                        type: 'success'
                    });
                    // 重新获取数据
                    this.fetchData()
                } else {
                    // 档案恢复提示失败
                    this.$message({
                        showClose: true,
                        message: '产品档案恢复失败',
                        type: 'error'
                    });
                }
            })
        }
    }
};
</script>